<template>
  <mivaLink :isNewTag="true" :title="title" :to="detailPath" class="spread_module-wrapper">
    <div class="spread_module_cover-module">
      <el-image :lazy="true" :src="cover" class="i-cover" fit="cover" scroll-container="body" />
      <span class="i-dur">{{ durationTotal }}</span>
      <div class="i-watch-later" />
    </div>
    <div class="spread_module_info-wrapper">
      <p class="i-title">{{ title }}</p>
      <div class="g-other">
        <span class="i-icon iconfont icon-shuju">{{value.hit||0|toTransfromTenThousand}}</span>
        <span class="i-icon iconfont icon-dianzan1">{{value.commentCount||0|toTransfromTenThousand}}</span>
      </div>
    </div>
  </mivaLink>
</template>

<script>
export default {
    props: {
        baseUrl: {
            type: String,
            default: '/detailAudio',
        },
        value: Object,
    },
    computed: {
        aid() {
            return this.value.aid;
        },
        detailPath() {
            return `${this.baseUrl}/${btoa(this.aid)}`;
        },
        title() {
            return this.value.title || '没有标题';
        },
        cover() {
            return `${this.value.cover}?x-oss-process=image/resize,m_fill,h_200,w_320`;
        },
        durationTotal() {
            const total = this.value.duration;
            const toDouble = num => (num < 10 ? `0${num}` : `${num}`);
            const min = Math.floor(total / 60);
            const second = total % 60;
            return `${min}:${toDouble(second)}`;
        },
    },
};
</script>

<style lang="less">
.spread_module-wrapper {
  // width: 200px;
  // height: 175px;
  width: 160px;
  height: 148px;
  margin: 10px 9px;
  padding: 3px;
  position: relative;
  font-size: 12px;
  overflow: hidden;

  // background-color: @base_color;

  border: 5px solid @base_color;
  background: #fff;

  border-bottom: 5px dotted @base_color;

  box-shadow: 5px -5px 0px @base_color_2;
  transition: all 0.3s;

  &:hover {
    // background-color: @base_color_2;
    border-color: @base_color_2;
    box-shadow: -5px 5px 0px @base_color;
    .i-dur,
    .i-watch-later,
    .spread_module_cover-module::before {
      opacity: 1;
    }

    // .i-cover {
    //   transform: scale(1.35) rotateZ(-15deg);
    // }

    .g-other {
      transform: translateY(25px);
    }
  }
}

.spread_module_cover-module {
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
    background: @globalMaskColor;
  }

  .i-cover {
    transition: @globalTransition;
  }

  .i-dur {
    opacity: 0;
    height: 12px;
    line-height: 12px;
    padding: 0 5px 1px 0;
    position: absolute;
    bottom: 2px;
    left: 6px;
    z-index: 1;
    transition: all 0.3s;
    color: #fff;
  }

  .i-watch-later {
    opacity: 0;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 1;
    cursor: pointer;
    background-image: url();

    &:hover::after {
      content: "稍后再看";
      padding: 3px 10px;
      position: absolute;
      top: -30px;
      right: 0;
      display: block;
      white-space: nowrap;
      font-size: 12px;
      border-radius: 4px;
      background-color: #222;
      color: #fff;
    }
  }
}

.spread_module_info-wrapper {
  padding: 0 5px;
  background-color: inherit;
  .i-title {
    height: 40px;
    line-height: 20px;
    word-wrap: break-word;
    word-break: break-all;
    text-align: justify;
    overflow: hidden;
    color: #222;
  }

  .g-other {
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: transform 0.3s;
    background-color: inherit;
  }

  .i-icon {
    display: inline-block;
    width: 50%;
    font-size: 12px;
    transform-origin: left bottom;
    transform: scale(0.8);
    color: @global_icon_color;
    &::before {
      margin-right: 5px;
      font-size: 18px;
    }
  }
}
</style>
